<template>
	<view class="order-detail">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">工单详情</text>
		</view>

		<view class="section-card">
			<view class="section-title">基本信息</view>
			<view class="info-grid">
				<view class="info-cell" v-for="(value, key) in baseInfo" :key="key">
					<text class="cell-label">{{ key }}</text>
					<text v-if="key.includes('状态')"
						:class="['cell-value', 'status-tag', getStatusClass(value)]">{{ value }}</text>
					<text v-else-if="key.includes('超时')"
						:class="['cell-value', value === '是' ? 'timeout-yes' : 'timeout-no']">{{ value }}</text>
					<text v-else class="cell-value">{{ value }}</text>
				</view>
			</view>
		</view>

		<view class="section-card">
			<view class="section-title">问题描述</view>
			<view class="description">{{ orderDetail.description }}</view>
		</view>

		<view class="section-card" v-if="orderDiagram">
			<view class="section-title">工单流程图</view>
			<image :src="orderDiagram" mode="widthFix" class="diagram-image"></image>
		</view>

		<view class="process-section">
			<view class="section-title">工单办理流程</view>
			<scroll-view scroll-y class="process-flow-vertical">
				<view class="process-container-vertical">
					<view v-for="(node, index) in processList" :key="index" class="process-node-wrapper">
						<view class="step-dot-outer">
							<view class="step-dot-inner">{{ index + 1 }}</view>
						</view>
						<view class="process-node-vertical">
							<view class="line">
								<uni-icons type="calendar" size="20" color="#2a6ac4" />
								{{ node.taskName || '未命名任务' }}
							</view>
							<view class="line">
								<uni-icons type="person" size="20" color="#2a6ac4" />
								{{ node.userName }}（{{ node.userRole }}）
							</view>
							<view class="line">
								<uni-icons
									:type="node.result === '通过' ? 'checkmark' : node.result === '驳回' ? 'close' : 'help'"
									size="20"
									:color="node.result === '通过' ? '#2dc26b' : node.result === '驳回' ? '#f56c6c' : '#999'" />
								结果：{{ node.result || '无' }}
							</view>
							<view class="line">
								<uni-icons type="chatboxes" size="20" color="#2a6ac4" />
								意见：{{ node.comment || '无' }}
							</view>
							<view class="line">
								<uni-icons type="clock" size="20" color="#2a6ac4" />
								时间：{{ node.finishTime || '未完成' }}
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
		<!-- 操作按钮 -->
		<view class="button-group" v-if="orderDetail.status !== 5">
			<button :class="['action-button', orderDetail.status === 3 ? 'primary' : 'disabled']"
				@click="handleEdit">修改</button>
			<button class="action-button danger" @click="showRevoke">撤销</button>
		</view>


		<!-- 撤销弹窗 -->
		<view v-if="isRevokeModalVisible" class="modal-mask">
			<view class="modal-box">
				<text class="modal-title">撤销工单</text>
				<text class="modal-tip">请输入撤销原因（不少于10个字符）</text>
				<textarea v-model="revokeReason" class="modal-textarea" placeholder="请输入原因"></textarea>
				<view class="modal-actions">
					<button class="cancel-btn" @click="closeRevokeModal">取消</button>
					<button class="submit-btn" @click="submitRevoke(revokeOrderId, revokeReason)">确定</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				orderDetail: {
					title: '',
					userName: '',
					urgency: '',
					description: '',
					place: '',
					status: 0,
					TimeOutApproval: false,
					TimeOutOperate: false,
					createTime: '',
					updateTime: ''
				},
				orderDiagram: '',
				processList: [],
				isRevokeModalVisible: false,
				editReason: '',
				revokeReason: ''
			};
		},
		computed: {
			baseInfo() {
				return {
					'工单类型': this.orderDetail.title,
					'申请人': this.orderDetail.userName,
					'紧急程度': this.formatUrgency(this.orderDetail.urgency),
					'故障位置': this.orderDetail.place,
					'工单状态': this.getStatusText(this.orderDetail.status),
					'是否超时审批': this.orderDetail.TimeOutApproval ? '是' : '否',
					'是否超时操作': this.orderDetail.TimeOutOperate ? '是' : '否',
					'创建时间': this.orderDetail.createTime,
					'更新时间': this.orderDetail.updateTime
				};
			}
		},
		methods: {
			showRevoke() {
				this.isRevokeModalVisible = true;
			},
			async fetchOrderDetail(orderId) {
				try {
					const token = uni.getStorageSync('token');

					const res = await uni.request({
						url: `http://localhost:8082/api/common/orderDetail/${orderId}`,
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'get'
					});

					if (res.statusCode === 200) {
						this.orderDetail = res.data.data;
					} else {
						uni.showToast({
							title: '获取工单详情失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			async fetchOrderprocess(orderId) {
				try {
					const token = uni.getStorageSync('token');

					const res = await uni.request({
						url: `http://localhost:8082/api/common/orderProcess/${orderId}`,
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'get'
					});

					if (res.statusCode === 200) {
						this.processList = res.data.data;
					} else {
						uni.showToast({
							title: '获取工单流程失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			getStatusText(status) {
				const map = {
					1: '待审批',
					2: '已审批',
					3: '已驳回',
					4: '操作中',
					5: '已完成',
					6: '已撤销'
				};
				return map[status] || '未知状态';
			},
			formatUrgency(urgency) {
				switch (urgency) {
					case 1:
						return '低';
					case 2:
						return '中';
					case 3:
						return '高';
					default:
						return '未知';
				}
			},
			getStatusClass(statusText) {
				switch (statusText) {
					case '待审批':
						return 'status-waiting';
					case '已审批':
						return 'status-approved';
					case '已驳回':
						return 'status-rejected';
					case '操作中':
						return 'status-operating';
					case '已完成':
						return 'status-finished';
					case '已撤销':
						return 'status-canceled';
					default:
						return '';
				}
			},
			async fetchOrderDiagram(orderId) {
				try {
					const token = uni.getStorageSync('token');

					const res = await uni.request({
						url: `http://localhost:8082/api/common/orderDiagram?orderId=${orderId}`,
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'get'
					});

					if (res.statusCode === 200) {
						this.orderDiagram = 'data:image/png;base64,' + res.data.data;
					} else {
						uni.showToast({
							title: '获取流程图失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			handleEdit() {
				if (this.orderDetail.status === 3) {
					uni.navigateTo({
						url: "/pages/user/editOrder/editOrder"
					});
				} else {
					uni.showToast({
						title: '当前工单无法修改',
						icon: 'none'
					});
				}
			},
			closeRevokeModal() {
				this.isRevokeModalVisible = false;
			},
			async submitRevoke(orderId, reason) {
				if (reason.length >= 10) {
					try {
						const token = uni.getStorageSync('token');
						const res = await uni.request({
							url: "http://localhost:8082/api/applicant/revoke",
							header: {
								'Authorization': 'Bearer ' + token,
								'Content-Type': 'application/json'
							},
							method: 'PUT',
							data: {
								orderId: orderId,
								revokeReason: reason
							}
						});

						if (res.statusCode === 200 && res.data.code === 1) {
							uni.showToast({
								title: '撤销成功',
								icon: 'success'
							});

							this.closeRevokeModal();
							this.fetchOrderDetail(orderId);
							this.fetchOrderprocess(orderId);
						} else {
							uni.showToast({
								title: '撤销失败',
								icon: 'none'
							});
						}
					} catch (err) {
						uni.showToast({
							title: '请求接口失败',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '撤销原因不得少于10个字符',
						icon: 'none'
					});
				}
			}
		},
		onLoad(options) {
			if (options.orderId) {
				this.fetchOrderDetail(options.orderId);
				this.fetchOrderDiagram(options.orderId);
				this.fetchOrderprocess(options.orderId);
			}
		}
	};
</script>

<style scoped>
	.order-detail {
		padding: 20rpx;
		background-color: #f0f4f8;
	}

	.header {
		background: linear-gradient(to right, #3b82f6, #2563eb);
		color: white;
		padding: 20rpx;
		text-align: center;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.section-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 24rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #1e3a8a;
		margin-bottom: 16rpx;
	}

	.info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx 12rpx;
	}

	.info-cell {
		display: flex;
		flex-direction: column;
	}

	.cell-label {
		font-size: 30rpx;
		color: #64748b;
	}

	.cell-value {
		font-size: 33rpx;
		font-weight: 500;
		color: #0f172a;
		margin-top: 4rpx;
	}

	.status-tag {
		display: inline-block;
		padding: 6rpx 12rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		color: white;
		text-align: center;
		width: fit-content;
	}

	.status-waiting {
		background: #facc15;
	}

	.status-approved {
		background: #22c55e;
	}

	.status-rejected {
		background: #ef4444;
	}

	.status-operating {
		background: #3b82f6;
	}

	.status-finished {
		background: #10b981;
	}

	.status-canceled {
		background: #9ca3af;
	}

	.timeout-yes {
		color: #ef4444;
		font-weight: bold;
	}

	.timeout-no {
		color: #22c55e;
	}

	.description {
		color: #0f172a;
		line-height: 1.6;
	}

	.diagram-image {
		width: 100%;
		max-height: 400rpx;
		object-fit: contain;
		border-radius: 12rpx;
	}


	.order-detail {
		padding: 32rpx;
		background-color: #f4f7fb;
	}

	.process-section {
		margin-top: 32rpx;
		padding: 24rpx;
		background: #f8faff;
		border-radius: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2a6ac4;
		margin-bottom: 20rpx;
	}

	.process-flow-vertical {
		max-height: 1000rpx;
	}

	.process-container-vertical {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.process-node-vertical {
		width: 100%;
		background: #ffffff;
		border: 2rpx solid #2a6ac4;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		word-wrap: break-word;
		overflow-wrap: break-word;
		border-left: 8rpx solid #2a6ac4;
	}

	.process-node-wrapper {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
		position: relative;
	}

	.step-dot-outer {
		width: 60rpx;
		display: flex;
		justify-content: center;
		margin-right: 20rpx;
		position: relative;
	}

	.step-dot-inner {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #2a6ac4;
		color: white;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		font-weight: bold;
		box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.1);
	}


	.content {
		font-size: 24rpx;
		color: #333;
		word-break: break-word;
	}

	.task {
		font-weight: bold;
		color: #2a6ac4;
		margin-bottom: 6rpx;
	}

	.info,
	.result,
	.comment,
	.time {
		font-size: 24rpx;
		color: #666;
		margin: 4rpx 0;
		word-break: break-word;
	}

	.arrow-vertical {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 12rpx 0;
	}

	.line-vertical {
		width: 2rpx;
		height: 24rpx;
		background-color: #2a6ac4;
	}

	.arrowhead-vertical {
		margin-top: 4rpx;
		color: #2a6ac4;
		font-weight: bold;
	}

	.line {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;
		margin: 6rpx 0;
	}

	.line uni-icons {
		margin-right: 12rpx;
	}

	.button-group {
		display: flex;
		justify-content: space-around;
		margin-top: 32rpx;
	}

	.action-button {
		flex: 1;
		margin: 0 16rpx;
		padding: 20rpx 0;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: white;
		background-color: #2a6ac4;
		text-align: center;
	}

	.action-button.disabled {
		background-color: #cbd5e1;
	}

	.action-button.danger {
		background-color: #ef4444;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		backdrop-filter: blur(4px);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.modal-box {
		background: linear-gradient(135deg, #ffffffcc, #e6f0ffcc);
		padding: 30px 28px;
		border-radius: 20px;
		width: 85%;
		max-width: 400px;
		box-shadow: 0 12px 28px rgba(38, 70, 153, 0.2),
			0 4px 12px rgba(38, 70, 153, 0.15);
		backdrop-filter: saturate(180%) blur(12px);
		border: 1.5px solid #1e40af;
		text-align: center;
		font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.modal-title {
		font-size: 24px;
		font-weight: 900;
		margin-bottom: 12px;
		background: linear-gradient(90deg, #2563eb, #3b82f6);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		letter-spacing: 1.2px;
	}

	.modal-tip {
		font-size: 16px;
		color: #475569;
		margin-bottom: 20px;
		font-weight: 500;
		line-height: 1.4;
	}

	.modal-textarea {
		width: 90%;
		min-height: 120px;
		padding: 16px 18px;
		font-size: 15px;
		border-radius: 14px;
		background-color: #f0f5ff;
		border: none;
		box-shadow: inset 0 2px 6px rgba(38, 70, 153, 0.1);
		resize: none;
		color: #1e293b;
		outline-offset: 0;
		transition: box-shadow 0.25s ease;
	}

	.modal-textarea:focus {
		box-shadow: 0 0 0 3px #2563ebaa;
		background-color: #e0ebff;
	}

	.modal-actions {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		margin-top: 16px;
	}

	.cancel-btn,
	.submit-btn {
		flex: 1;
		height: 48px;
		border-radius: 14px;
		font-size: 16px;
		font-weight: 700;
		border: none;
		cursor: pointer;
		transition: background 0.3s ease, box-shadow 0.3s ease;
		user-select: none;
		box-shadow: 0 4px 10px rgba(38, 70, 153, 0.15);
	}

	.cancel-btn {
		background: #e2e8f0;
		color: #475569;
	}

	.cancel-btn:hover {
		background: #cbd5e1;
		box-shadow: 0 6px 14px rgba(38, 70, 153, 0.25);
	}

	.submit-btn {
		background: linear-gradient(90deg, #2563eb, #3b82f6);
		color: white;
		box-shadow: 0 6px 18px rgba(38, 70, 153, 0.35);
	}

	.submit-btn:hover {
		background: linear-gradient(90deg, #3b82f6, #2563eb);
		box-shadow: 0 8px 22px rgba(38, 70, 153, 0.45);
	}
</style>